<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>游戏中...</title>
</head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/gobang.js"></script>
<script>
    //页面了参数
    var pageParams = new Object();
    var gameBegin = false;//游戏开始
    var isMe = false;//是否轮到我luozi
    var goColor;//0黑，1白
    //页面加载时触发
    $(function () {
        //初始化
        initWs();
        //获取页面参数
        initPage();
        //初始化棋盘
        initGoBang();

    });

    //初始化五子棋棋盘
    function initGoBang() {
        new GoBang({
            id: "gobang_div",
            click: function (x, y) {//点击棋盘的回调方法
                if (gameBegin && isMe) {
                    //准备一个信息，将落子信息串给webSocket
                    var msg = new Object();
                    msg.msgType = 202;//落子信息
                    msg.x = x;
                    msg.y = y;
                    msg.goColor = goColor;//落子颜色
                    //将落子信息告诉服务器
                    sendMsgToServer(msg);

                }

            }
        });
    }

    //初始化WebSocket
    var ws;

    function initWs() {
        //判断浏览器是否支持WebSocket技术
        if (window.WebSocket) {
            //支持websocket

            //连接websocket服务器
            ws = new WebSocket("ws://localhost:8080/gobank");

            //给ws对象设置回调方法
            ws.onopen = function () {
                console.log("已经成功连接了服务器....");
                //初始化房间
                initRoom();
            }

            ws.onclose = function () {
                console.log("与服务器的连接已经断开....");
            }

            ws.onerror = function (e) {
                console.log("与服务器连接发生异常....")
            }

            ws.onmessage = function (resp) {
                console.log("接收到服务器的消息：" + resp.data);
                //处理服务器的消息
                /*200-创建房间,201加入，
                300房间未找到，301房间满人，302密码错误，
                400有人加入房间
                  401游戏已开始
                  402 对手的落子信息
                 403自己落子成功*/
                var msg = JSON.parse(resp.data);
                if (msg.msgType == 300) {
                    showInfoDiv("[系统]:房间未找到！");
                } else if (msg.msgType == 301) {
                    showInfoDiv("[系统]:房间已满人！");

                } else if (msg.msgType == 302) {
                    showInfoDiv("[系统]:房间密码错误！");

                } else if (msg.msgType == 400) {
                    //alert("有人加入房间")
                    //获取对手的信息
                    var header = msg.header;
                    var nickname = msg.nickname;
                    var uid = msg.uid;
                    //设置头像等信息$
                    $("#right_header").attr("src", "http://localhost:8080/img/getImg?imgName=" + msg.header);
                    $("#right_nickname").html(nickname);
                    $("#right_flag").hide();
                    //隐藏右边等待的div
                    $(".right_div_wait").hide();
                    $(".right_div").show();

                    alert("游戏开始我方先手")
                    $("#left_flag").show();
                    gameBegin = true;//游戏开始
                    isMe = true;//房主默认先手
                    goColor = 0;//房主默认黑子
                    showInfoDiv("[系统]:“" + nickname + "”加入房间，对局开始...")

                } else if (msg.msgType == 401) {
                    // alert("加入房间成功")
                    //获取对手的信息
                    var header = msg.header;
                    var nickname = msg.nickname;
                    var uid = msg.uid;
                    //设置头像等信息$
                    $("#right_header").attr("src", "http://localhost:8080/img/getImg?imgName=" + msg.header);
                    $("#right_nickname").html(nickname);
                    $("#right_flag").hide();
                    //隐藏右边等待的div
                    $(".right_div_wait").hide();
                    $(".right_div").show();
                    alert("游戏开始对方先手")
                    $("#right_flag").show()


                    gameBegin = true;//游戏开始
                    isMe = false;//加入者默认后手
                    goColor = 1;//加入者默认白子
                    showInfoDiv("[系统]:成功加入“" + nickname + "”的房间，对局开始")

                } else if (msg.msgType == 402) {
                    //
                    var x = msg.x;
                    var y = msg.y;
                    var otherColor = msg.goColor;
                    var isWin=msg.isWin;//对方是否胜利
                    //
                    drawGo(x, y, otherColor);
                    //我方落子
                    isMe = true;
                    $("#left_flag").show();
                    $("#right_flag").hide();
                    //判断对方是否胜利
                    if (isWin){
                        //对方胜利
                        gameBegin=false;
                        showInfoDiv("[系统]:对方险胜，游戏结束！")
                    }
                } else if (msg.msgType == 403) {
                    //自己落子成功
                    var x = msg.x;
                    var y = msg.y;
                    var meColor = msg.goColor;
                    //
                    drawGo(x, y, meColor);
                    //转让落子权利
                    isMe = false;
                    $("#left_flag").hide();
                    $("#right_flag").show();
                    //判断我方是否胜利
                    var isWin=msg.isWin;//我方是否胜利

                    if (isWin){
                        //我方胜利
                        gameBegin=false;
                        showInfoDiv("[系统]:我方绝杀，游戏结束！")
                    }
                }
            }
        } else {
            alert("抱歉，您的浏览器不支持WebSocket，请更换更高级的浏览器");
        }
    }

    //发送消息到服务器
    function sendMsgToServer(msg) {
        if (ws) {
            if (typeof (msg) != "string") {
                //非字符串消息
                msg = JSON.stringify(msg);
            }
            //只发送字符串
            ws.send(msg);
        }
    }

    //初始化页面
    function initPage() {
        //获得上一个页面传递的参数
        //http://127.0.0.1:8848/GoGameClient/game.html?action=1&info=11111&pass=123456
        var url = location.href;
        var i = url.indexOf("?");//获取？的位置
        if (i != -1) {
            //截取字符串
            var params = url.substring(i + 1);

            //获取参数的分隔符
            var arrays = params.split("&");
            for (var j = 0; j < arrays.length; j++) {
                //用=符号截取参数的 key - value
                var key = arrays[j].split("=")[0];
                var value = arrays[j].split("=")[1];
                //将解析的key和value 放入 页面的全局变量
                pageParams[key] = value;
            }
        } else {
            alert("游戏房间信息有误！");
        }
    }

    //初始化房间
    function initRoom() {
        console.log(pageParams);
        if (pageParams.action == 1) {
            console.log("创建房间...");

            //走创建房间的逻辑
            createRoom();

        } else {
            console.log("加入房间...");
            //走加入房间的逻辑
            addRoom();
        }
    }


    //创建房间的逻辑
    function createRoom() {
        alert(JSON.stringify(pageParams))
        //发送webSocket信息
        //准备一个消息的协议
        var msg = new Object();
        msg.msgType = 200;//告诉服务器这是一个创建房间的消息
        msg.info = decodeURI(pageParams.info, "UTF-8");//告诉服务器房间信息
        msg.pass = pageParams.pass;//告诉服务器房间密码
        //用户信息
        msg.uid = localStorage.getItem("uid");
        msg.nickname = localStorage.getItem("nickname");
        msg.header = localStorage.getItem("header");

        //设置头像等信息$
        $("#left_header").attr("src", "http://localhost:8080/img/getImg?imgName=" + msg.header);
        $("#left_nickname").html(msg.nickname);
        $("#left_flag").hide();
        //消息通知服务器
        sendMsgToServer(msg);
        showInfoDiv("[系统]:已经成功连接到服务器...");
        showInfoDiv("[系统]:房间创建成功等待玩家加入...");

    }

    //加入房间
    function addRoom() {
        //发送websocket信息
        //准备一个消息的协议对象
        var msg = new Object();
        msg.msgType = 201;//告诉服务器加入房间
        msg.rid = pageParams.rid;//
        msg.pass = pageParams.pass;//房间密码

        //用户信息
        msg.uid = localStorage.getItem("uid");
        msg.nickname = localStorage.getItem("nickname");
        msg.header = localStorage.getItem("header");

        //设置头像等信息$
        $("#left_header").attr("src", "http://localhost:8080/img/getImg?imgName=" + msg.header);
        $("#left_nickname").html(msg.nickname);
        $("#left_flag").hide();
        //消息通知服务器
        sendMsgToServer(msg);
        //
        showInfoDiv("[系统]:尝试加入：" + rid + "号房间...")
    }

    //展示相关信息1到div
    function showInfoDiv(msg) {
        $("#info_div").append(msg + "<br/>")
    }
</script>
<style>
    .left_div {
        width: 20%;
        height: 100%;
        background-color: #363636;
        border-right: 1px solid #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .middle_div {
        width: 60%;
        height: 100%;

    }

    .right_div {
        width: 20%;
        height: 100%;
        background-color: #fbf9ee;
        border-left: 1px solid #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .right_div_wait {
        width: 20%;
        height: 100%;
        border-left: 1px solid #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-family: 楷体;
    }

    .header {
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }

    .left_nickname {
        margin-top: 40px;
        font-size: 30px;
        color: #FFFFFF;
        font-family: 楷体;
    }

    .right_nickname {
        margin-top: 40px;
        font-size: 30px;
        color: #000000;
        font-family: 楷体;
    }

    .left_flag {
        margin-top: 40px;
        font-size: 20px;
        font-family: 楷体;
        color: #FFFFFF;

    }

    .right_flag {
        margin-top: 40px;
        font-size: 20px;
        font-family: 楷体;
        color: #000000;

    }

    .middle_div {
        width: 60%;
        height: 100%;
        background-color: brown;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .gobang_class {
        width: 500px;
        height: 500px;
        background-color: #00A2D4;
        border-radius: 10px;
        box-shadow: 10px 10px 10px #888888;
    }


    .info_class {
        margin-top: 20px;
        border: 1px solid black;
        background: white;
        width: 500px;
        height: 100px;
        border-radius: 10px;
        box-shadow: 10px 10px 10px #888888;
        padding: 5px;
    }

    .bottom_class {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

</style>
<body style="background-color: burlywood;display: flex;flex-direction: row;width: 100%;height: 100%">
<div class="left_div">
    <!--房主头像-->
    <img id="left_header" class="header" src="img/2.png"/>
    <span id="left_nickname" class="left_nickname">昵称</span>
    <span id="left_flag" class="left_flag">我方落子</span>
</div>
<!-- 游戏中间部分 -->
<div class="middle_div">
    <!--棋盘-->
    <div id="gobang_div" class="gobang_class">

    </div>
    <!--聊天内容-->
    <div id="info_div" class="info_class">

    </div>
    <div class="bottom_class">
        <input id="info_input" class="info_put_class" placeholder="请输入聊天内容"/>
        <button style="margin-left: 10px;">发送信息</button>
        <button style="margin-left: 10px;">按住说话</button>
    </div>

</div>
<div class="right_div" style="display: none">
    <!--对手头像-->
    <img id="right_header" class="header" src="img/2.png"/>
    <span id="right_nickname" class="right_nickname">昵称</span>
    <span id="right_flag" class="right_flag">我方落子</span>
</div>
<div class="right_div_wait">
    等待玩家加入.......
</div>
</body>
</html>
